<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-11-10 09:35:53
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
view.nearby-map
  //- 地图
  Map(v-if="location.length > 0", :mapHeight="mapHeight", :location="location", :mapData="mapData")
  //- 业务模块
  view.module-container
    view.module
      view.main
        view.header.flex.justify-center.align-items-center
        scroll-view.container(
          scroll-y,
          :enhanced="true",
          :show-scrollbar="false",
          catchtouchmove="true",
          :style="{ height: moduleHeight + 'px' }"
        )
          view.bg-white.px-32.pb-24
            u-search(
              placeholder="在附近找一家餐厅",
              v-model="shopList.keywords",
              :showAction="false",
              @search="onSearch",
              @clear="onClearSearch"
            )
          view.grid-list.flex.bg-white.px-32.py-24
            view.card.flex.column.align-items-center.mr-40(
              v-for="(item, index) in moduleList",
              :key="index",
              @click="onModule(item.type)"
            )
              image(:src="item.image")
              text.mt-14.f-24.bold {{ item.name }}
          view.merchant.bg-white.px-32.py-24.mt-12(v-if="merchantList.length > 0")
            view.f-32-B 商家列表
            view.list
              MerchantCard(v-for="(record, rIndex) in merchantList", :key="rIndex", :item="record")
  //- 位置定位提示框
  ModalBox(:data="modalData", @cancel="onModalBoxCancel", @confirm="onModalBoxConfirm")
</template>

<script setup>
import Map from "@/components/map/map.vue";
import NearbyCollection from "@/static/images/nearby-collection.png";
import NearbyRadiation from "@/static/images/nearby-radiation.png";
import NearbyMerchant from "@/static/images/nearby-merchant.png";
import MerchantCard from "@/components/merchant-card/merchant-card.vue";
import MerchantCover from "@/static/images/merchant-cover.png";
import ModalBox from "@/components/modal-box/modal-box.vue";
import { homeApi } from "../../api/home";

const keyword = ref("");
const moduleList = ref([
  {
    name: "收藏",
    type: 1,
    image: NearbyCollection
  },
  {
    name: "辐射值",
    type: 2,
    image: NearbyRadiation
  },
  {
    name: "餐厅",
    type: 3,
    image: NearbyMerchant
  }
]);
const screenHeight = ref(uni.getSystemInfoSync().screenHeight);
const mapHeight = ref();
const moduleHeight = ref("145");
const merchantList = ref([]);
const modalData = ref({
  show: true,
  title: "是否同意开启手机定位权限",
  btn1: "不同意",
  btn2: "同意",
  type: 1
});
const location = ref([]);
const mapData = ref([]);

onLoad(() => {
  console.log("高度", screenHeight.value);
  resetMapHeigth();
});

//获取商家列表
const total = ref(0);
const shopList = ref({
  keywords: "",
  lat: "",
  lon: "",
  num: 10,
  page: 1
});
const getShopList = () => {
  homeApi
    .shopList(shopList.value)
    .then((res) => {
      merchantList.value = res.data.data;
      total.value = res.data.total;
      // 商家地图数据
      merchantList.value.forEach((item) => {
        const obj = {
          x: item.lon,
          y: item.lat,
          type: "other"
        };
        mapData.value.push(obj);
      });
    })
    .catch((err) => {});
};

// 触底触发
onReachBottom(() => {
  if (total.value > shopList.value.num * shopList.value.page) {
    shopList.value.page++;
    getShopList();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }
});

// 地图容器高度
const resetMapHeigth = () => {
  mapHeight.value = screenHeight.value - Number(moduleHeight.value);
};

// 获取当前地理位置
const getLocation = () => {
  uni.getLocation({
    type: "wgs84", // 坐标系类型
    success: function (res) {
      modalData.value.show = false;
      const longitude = res.longitude; // 经度
      const latitude = res.latitude; // 维度
      // uni.showToast({
      //   title: "位置：" + longitude + "," + latitude,
      //   icon: "none"
      // });
      location.value = [longitude, latitude];
      mapData.value.push({
        x: location.value[0],
        y: location.value[1],
        type: "local"
      });
    },
    fail: function (res) {
      modalData.value.show = false;
      console.log("获取定位失败：" + res.errMsg);
    }
  });
};

// 模态框操作
const onModalBoxCancel = () => {
  modalData.value.show = false;
};
const onModalBoxConfirm = () => {
  getLocation();
};

// 请求商家列表
const onModule = (type) => {
  switch (type) {
    case 3:
      moduleHeight.value = "360";
      resetMapHeigth();
      shopList.value.lon = location.value[0];
      shopList.value.lat = location.value[1];
      getShopList();
      break;
    default:
      moduleHeight.value = "145";
      resetMapHeigth();
      break;
  }
};
// 搜索商家
const onSearch = () => {
  shopList.value.page = 1;
  getShopList();
};
// 重置商家列表
const onClearSearch = () => {
  shopList.value.page = 1;
  shopList.value.keywords = "";
  getShopList();
};
</script>

<style lang="stylus" scoped>
.nearby-map {
  .module-container {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .module {
    // height: calc(100%);
    .main {
      overflow: hidden;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      background: #fff;

      .header {
        height: 60rpx;

        &::before {
          width: 198rpx;
          height: 8rpx;
          border-radius: 5rpx;
          background: rgba(0, 0, 0, 0.6);
          content: '';
        }
      }

      .container {
        // height: 100vh;
        background: #F5F5F5;
        box-sizing: border-box;
      }

      .grid-list {
        image {
          width: 104rpx;
          height: 104rpx;
        }
      }
    }
  }

  .btn {
    width: 268rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    border-radius: 104rpx;
  }

  .confirm {
    background: #306EFF;
    color: #ffffff;
  }

  .cancel {
    background: rgba(48, 110, 255, 0.12);
    color: #306EFF;
  }
}
</style>
